<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <script src="js/jquery-3.7.1.js"></script>
    <link href="css/news.css" rel="stylesheet">
</head>

<body>
    <div class="top">
        <span id="hello">hi,</span>
        <span id="login">&nbsp;&nbsp;<a href="login.html">登录|</a><a href="reg.html">注册</a></span>
    </div>
    <div class="baidunew">
        <div class="ssk">
            <img src="images/新闻发布系统照片/log-news.png" />
            <input type="text" class="wenbenkuang">
            <button>百度一下</button>
        </div>
        <div class="main">
            <div id="new">
                <h3>热点要闻</h3>
                <hr>
                <ul>

                </ul>
                <div></div>
                <h3>郑州新闻</h3>
                <hr>
                <ul></ul>
                <div></div>
                <h3>视野</h3>
                <hr>
                <ul></ul>
                <div></div>
                <h3>天下</h3>
                <hr>
                <ul></ul>
                <div></div>
                <h3>娱乐</h3>
                <hr>
                <ul></ul>
                <div></div>
                <h3>体育 </h3>
                <hr>
                <ul></ul>
            </div>
            <div class="lbt">
                <div class="nums">
                    <div class="num"></div>
                    <div class="num"></div>
                    <div class="num"></div>
                    <div class="num"></div>
                    <div class="num"></div>
                </div>
                <div class="arrow">
                    <button class="prev"><img src="images/左箭头.png" /></button>
                    <button class="next"><img src="images/右箭头.png" /></button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var user = window.localStorage.getItem('user');
        //把json字符串(JSON.stringfy()) 转换成JSON对象(JSON.parse(字符串))
        if (user == null) {//未登录
            $("#hello").hide();
        } else {//已登录
            var obj = JSON.parse(user);
            $("#hello").html("hi," + `<img src='http://localhost:8080/demo/${obj.useravator}'/>`+obj.usernick + " <a href='javascript:exit()'>退出</a>")
            $("#login").hide();
        }
        function exit() {
            window.localStorage.removeItem("user");
            $("#hello").hide();
            $("#login").show();
        }


        $.ajax({
            url: 'http://localhost:8080/demo/ShowNewsServlet1',
            method: 'get',
            dataType: 'JSON',
            success: function (res) {
                res.data.forEach(item => {
                    var li = `
                    <li onclick="shownewsInfo(${item.newsid})">
                        ${item.newstitle};
                    </li>`
                    $("#new>ul").append(li);
                });
            }
        })
        // $.ajax({
        //     url: 'http://localhost:8080/demo/ShowNewsServlet',
        //     method: 'get',
        //     dataType: 'JSON',
        //     success: function (res) {
        //         res.data.forEach(item => {
        //             var li = `
        //             <li onclick="shownewsInfo(${item.newsid})">
        //                 ${item.newstitle};
        //             </li>`
        //             $("#new #ul2").append(li);
        //         });
        //     }
        // })


        $.ajax({
            url: "http://localhost:8080/demo/ShowNewspicServlet",
            method: 'get',
            success: function (res) {
                JSON.parse(res).data.forEach(element => {
                    var img = `<img src=http://localhost:8080/images/${element.newspic} class="img" > `
                    $('.lbt').append(img)
                });

            }
        })
        function shownewsInfo(id) {
            window.location.href = "newsInfo.html?newsid=" + id;//地址?参数1=值1&参数2=值2...
        }
        var photo = document.getElementsByClassName('img');
        var nums = document.getElementsByClassName('num');
        var i = 0;
        var timer = window.setInterval(lunbo, 2000);
        function lunbo() {
            for (let a = 0; a <photo.length; a++) {
                if (a == i) {
                    photo[a].style.display = "block";
                    nums[a].style.backgroundColor = "blue";
                } else {
                    photo[a].style.display = "none";
                    nums[a].style.backgroundColor = "#fff";
                }
            }
            i++;
            if (i >= photo.length) {
                i  = 0;
            }
        }
        for (let a = 0; a < photo.length; a++) {
            photo[a].onmouseover = function () {
                clearInterval(timer)
            }
            photo[a].onmouseout = function () {
                i = a;
                timer = window.setInterval(function () {
                    for (let b = 0; b <photo.length; b++) {
                        if (i == b) {
                            photo[b].style.display = "block";                         
                            nums[b].style.backgroundColor = "blue";
                        } else {
                            photo[b].style.display = "none";
                            nums[b].style.backgroundColor = "#fff";
                        }
                    }
                    i++;
                    if (i >= photo.length) {
                        i = 0;
                    }
                }, 1000)
            }
        }
        for (let a = 0; a < nums.length; a++) {
            nums[a].onmouseover = function () {
                for (let a = 0; a < nums.length; a++) {
                    if (nums[a] == this) {//当前选中的小标号
                        photo[a].style.display = "block"
                        nums[a].style.backgroundColor = "blue";
                    } else {//其他的4个标号和图片都要还原
                        photo[a].style.display = "none";
                        nums[a].style.backgroundColor = "#fff";
                    }
                }
                clearInterval(timer);
            }
            nums[a].onmouseout = function () {
                i = a;
                timer = window.setInterval(function () {
                    for (let b = 0; b < photo.length; b++) {
                        if (b == i) {
                            photo[b].style.display = "block";
                            nums[b].style.backgroundColor = "blue";
                        } else {
                            photo[b].style.display = "none";
                            nums[b].style.backgroundColor = "#fff";
                        }
                    }
                    i++;
                    if (i >=photo.length) {
                        i = 0;
                    }
                }, 1000)
            }
        }
        function left() {
            console.log("图片是" + i);
            i = (i - 1) < 0 ? 4 : i - 1;
            clearInterval(timer);
            for (let b = 0; b < photo.length; b++) {
                if (b == i) {
                    photo[b].style.display = "block";
                    nums[b].style.backgroundColor = "blue";
                } else {
                    photo[b].style.display = "none";
                    nums[b].style.backgroundColor = "white";
                }
            }
        }
        function right() {
            console.log("图片是" + i);
            i = (i + 1) > 4 ? 0 : i + 1;
            clearInterval(timer);
            for (let b = 0; b < photo.length; b++) {
                if (b == i) {
                    photo[b].style.display = "block";
                    nums[b].style.backgroundColor = "blue";
                } else {
                    photo[b].style.display = "none";
                    nums[b].style.backgroundColor = "white";
                }
            }
        }
        //显现与隐藏按钮
        const lbt = document.getElementsByClassName("lbt")[0]
        const prev = document.getElementsByClassName("prev")[0]
        const next = document.getElementsByClassName("next")[0]
        lbt.addEventListener("mouseover", function () {
            prev.style.display = "block";
            next.style.display = "block";
        })
        lbt.addEventListener("mouseout", function () {
            prev.style.display = "none";
            next.style.display = "none";
        })
        prev.addEventListener("click", left)
        next.addEventListener("click", right)
    </script>
</body>

</html>